<template>
<div class="view_container">
    <van-nav-bar
        :title="$route.meta.title"
        left-arrow
        :fixed="true"
        :placeholder="true"
        @click-left="onReturn">
        <template #left>
            <van-icon name="arrow-left" size="21" color="#000000" />
        </template>
    </van-nav-bar>
    <van-form 
        @submit="onUpdate"
        class="container">
        <div class="form_container">
            <van-field
                v-model="form.passwd"
                type="password"
                name="原密码"
                label="原密码"
                placeholder="原密码"
                :rules="[{required: true, message: ''}]"/>
            <van-field
                v-model="form.newPasswd"
                type="password"
                name="新密码"
                label="新密码"
                placeholder="新密码"
                :rules="[{required: true, message: ''}]"/>
            <van-field
                v-model="form.newPasswd_"
                type="password"
                name="再次输入"
                label="再次输入"
                placeholder="再次输入"
                :rules="[{required: true, message: ''}]"/>
        </div>
        <van-button
            class="bt_container"
            type="primary" 
            native-type="submit">
            确认修改
        </van-button>
    </van-form>
</div>
</template>
<script>
//修改密码页面
export default {
    name: "UpdatePassword",
    data() {
        return {
            loading:false,
            form: {
                passwd: "",
                newPasswd: "",
                newPasswd_:'',
            },
        };
    },
    computed:{
        user:{  //全局的用户信息
            get(){
                return this.$store.state.userModule.user;
            },
            set(newValue){
                this.$store.commit('userModule/setUser',newValue);
            },
        },
    },
    methods: {
        onReturn() {
            this.$router.go(-1);
        },
        onUpdate(){
            if(this.form.newPasswd != this.form.newPasswd_){
                this.$notify({ type: 'danger', message:'两次密码不一致'});
                return;
            }
            if(this.form.newPasswd == this.user.phone){
                this.$notify({ type: 'danger', message:'新密码不能和账号一致'});
                return;
            }
            this.loading = true;
            this.$Api.repass(
                this.form,
            ).then((res) => {
                this.$notify({ type: 'success', message: res.msg });
                this.$router.push({path:'/mine'});
            }).catch(res=>{
                this.$notify({ type: 'danger', message:res.msg});
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
};
</script>
<style scoped lang="scss">
.view_container {
    background-color: #f0f2f5;
    height: var(--clientHeight);
    padding: 20px;
    box-sizing: border-box;
    .container {
        .form_container{
            border-radius: 10px;
            overflow: hidden;
        }
        /deep/ .van-cell::after {
            position: static;
        }
        /deep/ .van-cell {
            padding:20px;
            background-color: white;
        }
        .bt_container {
            margin-top: 30px;
            width: 100%;
            border-radius: 100px !important;
            padding: 25px 0 !important;
            font-weight: bold;
            font-size: 16px;
            box-shadow: 0px 5px 20px -3px rgba(16,128,255,0.4);
        }
    }
}
</style>
